<!--
 * @Author: your name
 * @Date: 2021-04-01 10:59:40
 * @LastEditTime: 2021-04-01 11:10:44
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \active-front\src\components\UploadIcon\index.vue
-->
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <form>
      <input type="file" @change="getFile($event)" />
      <button
        class="button button-primary button-pill button-small"
        @click="submit($event)"
      >
        提交
      </button>
    </form>
  </div>
</template>

<script>
import UploadApi from "../../api/HotEvent.js";
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      file: ""
    };
  },
  methods: {
    getFile: function(event) {
      this.file = event.target.files[0];
      console.log(this.file);
    },
    submit: function(event) {
      //阻止元素发生默认的行为
      event.preventDefault();
      let formData = new FormData();
      formData.append("file", this.file);
      UploadApi.uploadIcon(formData);
    }
  }
};
</script>
